<template>
	<view>
		<!-- #ifndef MP-ALIPAY -->
		<nav-bar title="设置密码"></nav-bar>
		<!-- #endif -->
		<u-gap height="180" bg-color="#ededed"></u-gap>
		<!--密码-->
		<u-message-input @change="change" @finish="finish" :disabled-keyboard="false" :value="password" :focus="true"></u-message-input>
		<!--键盘-->
		<!-- <u-keyboard ref="uKeyboard" mode="number" @change="valChange" @backspace="backspace" :dot-enabled="false" :mask="false" :mask-close-able="false" tips="请输入密码" v-model="isKeyboard" :z-index="9"></u-keyboard> -->
		<u-gap height="280" bg-color="#ededed"></u-gap>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		onReady() {
			// this.isKeyboard = true;
		},
		data() {
			return {
				isKeyboard:false,
				password:""
			}
		},
		onLoad(e){

		},
		methods: {
			valChange(val){
				let that = this;
				if(that.password.length<4) that.password += val;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.password.length) this.password = this.password.substr(0, this.password.length - 1);
			},
			change(e) {
				console.log('内容改变，当前值为：' + e);
				this.password = e;
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.$refs.uToast.show({
					title: '设置成功密码为'+e,
					type: 'success'
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #ededed;
	}
</style>
